<template>
  <div class="exchangeContent" id="container">
    <div style="width: 22%;height: 100%;display:inline-block;vertical-align: top;padding-left: 0.5%;padding-right: 0.5%;box-sizing: border-box;background: #151511;">
      <!--左面板-->
      <div style="height: 50%;background: #1C1A13;overflow: hidden;color: #ffffff;">
        <!--交易对选择面板-->
        <div class="symbol">
          <div class="dot">
            <img :src="newstData.currency_logo" alt="" style="width: 100%;">
          </div>
          <div>
            <div style="font-weight: bold;font-size: 16px;">
              {{symbolReverse}}
            </div>
            <div>
              量：{{newstData.trade.done_num_24H}}
            </div>
            <div>
              低：{{newstData.trade.min_price}}
            </div>
          </div>
          <div>
            <div style="font-weight: bold;font-size: 16px;">
              {{newstData.trade.new_price}}
            </div>
            <div>
              涨幅：<span :class="{'red':newstData.trade.change_24H<0,'green':newstData.trade.change_24H>=0}">{{newstData.trade.change_24H>=0?'+'+newstData.trade.change_24H:newstData.trade.change_24H}}%</span>
            </div>
            <div>
              高：{{newstData.trade.max_price}}
            </div>
          </div>
        </div>
        <div class="search">
          <div>
            <span style="display:block">市场</span>
            <el-input suffix-icon="el-icon-search" size="mini" style="width: 105px;" @input="searchCoin" v-model="search"></el-input>
          </div>
          <ul class="symbolTab clear">
            <li v-for="item,index in webDate.body.home" class="marketTab" @click="changeMarket(index)">
              <span :class="{'marketUnderLine':index === selecetdMarket}">{{item.currency_mark}}</span>
            </li>
            <li class="marketTab" @click="changeMarket(-1)">
              <i class="el-icon-star-on" :class="{'sortColor':selecetdMarket === -1}"></i>
            </li>
          </ul>
        </div>
        <div style="width: 100%;border-top: 2px solid #151511;" class="symbolTable">
            <table style="border-collapse: collapse;">
              <colgroup style="width:23%;"></colgroup>
              <colgroup style="width:40%;"></colgroup>
              <colgroup style="width:30%;"></colgroup>
              <tbody>
                <tr style="height: 30px;line-height: 30px;background: #21201A;border-bottom: 1px solid #1C1A13;">
                  <th class="font-left">币种</th>
                  <th class="font-right" style="cursor: pointer;padding-right: 15px;" @click="sort('new_price')">
                    最新价
                    <span style="position: relative">
                <i class="el-icon-caret-top" style="position: absolute;top: 0;" :class="{'sortColor':sortStatus['new_price'].sort&&sortStatus['new_price'].dir === 'up'}"></i>
                <i class="el-icon-caret-bottom" style="position: absolute;top: 7px;" :class="{'sortColor':sortStatus['new_price'].sort&&sortStatus['new_price'].dir === 'down'}"></i>
              </span>
                  </th>
                  <th class="font-right" style="padding-right: 15px;cursor: pointer" @click="sort('change_24H')">
                    涨幅
                    <span style="position: relative;">
                <i class="el-icon-caret-top" style="position: absolute;top: 0;" :class="{'sortColor':sortStatus['change_24H'].sort&&sortStatus['change_24H'].dir === 'up'}"></i>
                <i class="el-icon-caret-bottom" style="position: absolute;top: 7px;" :class="{'sortColor':sortStatus['change_24H'].sort&&sortStatus['change_24H'].dir === 'down'}"></i>
              </span>
                  </th>
                </tr>
              </tbody>
            </table>
            <div class="newmarket" style="height: calc(100% - 38px);overflow: auto">
              <table style="border-collapse: collapse;line-height: 30px;box-sizing: border-box;">
                <colgroup style="width:23%;"></colgroup>
                <colgroup style="width:40%;"></colgroup>
                <colgroup style="width:30%;"></colgroup>
                <tbody>
                <tr v-for="item,index in showSelecetdMarketData" @click="goTo(item)" style="cursor: pointer;background: #21201A;border-bottom: 1px solid #1C1A13;">
                  <td class="">
                    <i class="el-icon-star-on" :class="{'seleColor':item.self}" @click.stop = 'sele(item,index)'></i>
                    <span>{{item.currency_mark}}</span>
                  </td>
                  <td class="font-right"><span>{{item.trade.new_price}}</span></td>
                  <td class="font-right" style="padding-right: 5px;" :class="{'red':item.trade.change_24H<0,'green':item.trade.change_24H>=0}"><span>{{item.trade.change_24H>=0?'+'+item.trade.change_24H:item.trade.change_24H}}%</span></td>
                </tr>
                </tbody>

              </table>
            </div>
        </div>
      </div>
      <!--实时成交面板-->
      <div style="height: calc(50% - 10px);background: #21201A;margin-top: 10px;color: #FFFFFF;">
        <div style="color: #C5B39B;background: #1C1A13;height: 38px;line-height: 38px;">
          实时成交
        </div>
        <div style="width: 100%;height: calc(100% - 38px);">
          <table style="width: 100%;border-collapse: collapse;">
            <colgroup style="width:25%;"></colgroup>
            <colgroup style="width:26%;"></colgroup>
            <colgroup style="width:35%;"></colgroup>
            <tbody>
              <tr style="height: 30px;line-height: 30px;">
                <td>
                  <span>时间</span>
                </td>
                <td class="font-left"><span>价格({{market}}）</span></td>
                <td class="font-left" style="padding-left: 0px;"><span>数量({{coin}}）</span></td>
              </tr>
            </tbody>
          </table>
          <div class="realTransScroll">
            <table style="width: 100%">
              <colgroup style="width:26%;"></colgroup>
              <colgroup style="width:26%;"></colgroup>
              <colgroup style="width:35%;"></colgroup>
              <tbody>
                <tr v-for="item in newstexchange" style="height: 30px;line-height: 30px;">
                  <td>
                    <span>{{item.add_time | time('HH:mm:ss')}}</span>
                  </td>
                  <td class="font-left"><span :class="{'red':item.type === 'buy','green':item.type === 'sell'}">{{item.price}}</span></td>
                  <td class="font-left">
                    <span>{{item.num}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--中间面板-->
    <div style="width:calc(48% - 20px);height: 100%;display:inline-block;margin: 0 10px;background: #21201A;">
      <!--k线图面板-->
      <div style="height: 50%;color: #FFFFFF;width: 100%;">
        <div style="height: 60px;">
          <div style="padding: 5px 0;">
            <span class="font16" style="font-weight: bold;">{{symbolReverse}}</span>
            <span class="font16" style="padding-left: 10px;font-weight: bold;">{{newstData.trade.new_price}}</span>
            <span class="font14">≈ {{mul(newstData.trade.new_price,newstData.trade.price_cny)}}CNY</span>
          </div>
          <div>
            <span>涨幅：<span :class="{'red':newstData.trade.change_24H<0,'green':newstData.trade.change_24H>=0}">{{newstData.trade.change_24H>=0?'+'+newstData.trade.change_24H:newstData.trade.change_24H}}%</span> </span>
            <span style="padding: 0 10px;">高：{{newstData.trade.max_price}}</span>
            <span>低：{{newstData.trade.min_price}}</span>
            <span style="padding: 0 10px;">24h量：{{newstData.trade.done_num_24H}}</span>
          </div>
        </div>
        <div id="kline_container" ref="kline_container"></div>
      </div>
      <!--委托面板-->
      <div style="height: calc(50% - 10px);background: #21201A;margin-top: 10px;color: #FFFFFF;">
        <div style="height: 38px;line-height: 38px;background: #1C1A13;">
          <ul class="deputeTabLeft">
            <li><span :class="{'deputeTabLeftTab':deputeType === 'current'}" @click="changeDeputeType('current','orders')">当前委托</span></li>
            <li><span :class="{'deputeTabLeftTab':deputeType === 'history'}" @click="changeDeputeType('history','status')">历史委托</span></li>
          </ul>
          <ul class="deputeTabRight">
              <li>
                <span :class="{deputeTabRightTab:exchangeTypeTab=='buy'}" @click="changeDeputeTabType('buy')">买入</span>
              </li>
              <li>
                <span :class="{deputeTabRightTab:exchangeTypeTab=='sell'}" @click="changeDeputeTabType('sell')">卖出</span>
              </li>
              <li>
                <span :class="{deputeTabRightTab:exchangeTypeTab=='all'}" @click="changeDeputeTabType('all')">全部</span>
              </li>
          </ul>
        </div>
        <div class="currentDeputeTable" v-show="deputeType === 'current'">
          <table>
            <colgroup style="width:23%;"></colgroup>
            <colgroup style="width:16%;"></colgroup>
            <colgroup style="width:16%;"></colgroup>
            <colgroup style="width:18%;"></colgroup>
            <colgroup style="width:12%;"></colgroup>
            <colgroup style="width:5%;"></colgroup>
            <tbody>
              <tr>
                <td><span style="padding-left: 10px;">时间</span></td>
                <td class="font-left"><span>价格（{{market}}）</span></td>
                <td class="font-left"><span>数量（{{coin}}）</span></td>
                <td class="font-left"><span>委托总额（{{market}}）</span></td>
                <td class="font-left"><span>状态</span></td>
                <td class="font-left"><span>操作</span></td>
              </tr>
            </tbody>
          </table>
          <div class="realTransScroll" id="realTransScroll" ref="realTransScroll">
            <table style="width: 100%" v-loading="tableLoad" ref="realTransScrollWrap">
              <colgroup style="width:23%;"></colgroup>
              <colgroup style="width:16%;"></colgroup>
              <colgroup style="width:16%;"></colgroup>
              <colgroup style="width:18%;"></colgroup>
              <colgroup style="width:12%;margin-left: 6%;"></colgroup>
              <colgroup style="width:5%;"></colgroup>
              <tbody>
                <tr v-for="item in currentDeputeDate">
                  <td><span style="padding-left: 10px;">{{item.add_time | time}}</span></td>
                  <td><span>{{item.price}}</span></td>
                  <td>
                    <span>{{item.num - item.trade_num}}</span>
                  </td>
                  <td><span>{{mul(item.price,(item.num - item.trade_num)) | point}}</span></td>
                  <td><span>{{item.type | exchangeType}}</span></td>
                  <td><span style="cursor: pointer;border: 1px solid #C8B297;padding: 0px 2px;border-radius: 2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" @click="detalOrder(item)">撤单</span></td>
                </tr>
                <tr v-if="currentDeputeDate.length === 0 && !login" >
                   <td colspan="6" style="text-align: center">暂无数据</td>
                </tr>
                <tr v-if="login" >
                  <td colspan="6" style="text-align: center;" @click="$router.push({name:'login'})">请先去<span style="color: red;">登录</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="currentDeputeTableHis" v-show="deputeType === 'history'">
          <div>
              <span @click="searchOrder('7')" :class="{'timeType':timeType==='7'}">1周</span>
              <span @click="searchOrder('30')" :class="{'timeType':timeType==='30'}">1个月</span>
              <span @click="searchOrder('90')" :class="{'timeType':timeType==='90'}">3个月</span>
              <div class="exchangePicker">
                  <el-date-picker
                    v-model="valueTime1"
                    type="date"
                    size="mini"
                    id="pick1"
                    @change="pickerChange('stime')"
                    :picker-options="pickerOptions1"
                    placeholder="开始时间">
                  </el-date-picker>
                  <span>至</span>
                  <el-date-picker
                    v-model="valueTime2"
                    type="date"
                    size="mini"
                    id="pick2"
                    @change="pickerChange('etime')"
                    :picker-options="pickerOptions1"
                    placeholder="结束时间">
                  </el-date-picker>
              </div>
              <el-button type="primary" size="mini" style="height: 28px;vertical-align: top;margin-left: 10px;" @click="resetPicker">重 置</el-button>

          </div>
          <table style="background: #1C1A13;height: 38px;">
            <colgroup style="width:23%;"></colgroup>
            <colgroup style="width:16%;"></colgroup>
            <colgroup style="width:16%;"></colgroup>
            <colgroup style="width:17%;"></colgroup>
            <colgroup style="width:17%;"></colgroup>
            <colgroup style="width:5%;"></colgroup>
            <tbody>
            <tr>
              <td><span style="padding-left: 10px;">时间</span></td>
              <td class="font-left"><span>价格（{{market}}）</span></td>
              <td class="font-left"><span>数量（{{coin}}）</span></td>
              <td class="font-left"><span>交易总额({{market}}）</span></td>
              <td class="font-left"><span>委托总额({{market}}）</span></td>
              <td class="font-left"><span>状态</span></td>
            </tr>
            </tbody>
          </table>
          <div class="hisDeputeTableWrap" id="hisDeputeTableWrap" ref="hisDeputeTableWrap">
            <table style="width: 100%" ref="hisTable" v-loading="tableLoad">
              <colgroup style="width:23%;"></colgroup>
              <colgroup style="width:16%;"></colgroup>
              <colgroup style="width:16%;"></colgroup>
              <colgroup style="width:17%;"></colgroup>
              <colgroup style="width:17%;"></colgroup>
              <colgroup style="width:5%;"></colgroup>
              <tbody>
              <tr v-for="item in historyDeputeDate">
                <td><span style="padding-left: 10px;">{{item.trade_time | time}}</span></td>
                <td><span>{{item.price}}</span></td>
                <td>
                  <span>{{item.num}}</span>
                </td>
                <td><span :class="{'green':item.type == 'buy','red':item.type == 'sell'}">{{mul(item.price,item.trade_num) | point}}</span></td>
                <td><span :class="{'green':item.type == 'buy','red':item.type == 'sell'}">{{mul(item.price,item.num) | point}}</span></td>
                <td class="font-center"><span :class="{'green':item.type == 'buy','red':item.type == 'sell'}">{{item.type | exchangeType}}</span></td>
              </tr>
              <tr v-if="historyDeputeDate.length == 0" >
                <td colspan="6" style="text-align: center">暂无数据</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--右面板-->
    <div style="width: 29%;height: 100%;display:inline-block;vertical-align: top;color: #FFFFFF;">
      <!--最新价格面板-->
      <div style="max-height: 50%;background: #21201A;height: calc(100% - 360px);">
        <div style="height: 38px;line-height: 38px;background: #1C1A13;">
          最新价格 <span class="font16">{{newstData.trade.new_price}}</span>
          <span class="font14" style="color:#C5B39B;">≈ {{mul(newstData.trade.new_price,newstData.trade.price_cny)}}CNY</span>
        </div>
        <div style="width: 100%;height: calc(100% - 38px);">
          <div style="width: 50%;height: 100%;display: inline-block;">
            <table style="width: 100%;border-collapse: collapse;">
              <colgroup style="width:49%;"></colgroup>
              <colgroup style="width:49%;"></colgroup>
              <tbody>
              <tr style="height: 30px;line-height: 30px;">
                <td>
                  <span>数量 {{coin}}</span>
                </td>
                <td class="font-right"><span>价格 {{market}}</span></td>
              </tr>
              </tbody>
            </table>
            <div class="newstScroll">
              <table style="width: 100%;border-collapse: collapse;">
                <colgroup style="width:49%;"></colgroup>
                <colgroup style="width:49%;"></colgroup>
                <tbody>
                  <tr v-for="item in buyDateOri">
                    <td style="cursor: pointer" @click="clickPriceNum(item,'buy','Num')">
                      <span>{{tofix(item.num)}}</span>
                    </td>
                    <td class="font-right green" style="cursor: pointer" @click="clickPriceNum(item,'buy','Price')"><span>{{tofix(item.price)}}</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div><!--
          --><div style="width: 50%;height: 100%;display: inline-block;">
            <table style="width: 100%;border-collapse: collapse;">
              <colgroup style="width:49%;"></colgroup>
              <colgroup style="width:49%;"></colgroup>
              <tbody>
              <tr style="height: 30px;line-height: 30px;">
                <td>
                  <span>价格 {{market}}</span>
                </td>
                <td class="font-right">
                  <span>数量 {{coin}}</span>
                </td>
              </tr>
              </tbody>
            </table>
            <div class="newstScroll">
              <table style="width: 100%;border-collapse: collapse;">
                <colgroup style="width:49%;"></colgroup>
                <colgroup style="width:49%;"></colgroup>
                <tbody>
                  <tr v-for="item in sellDateOri">
                    <td style="cursor: pointer;" @click="clickPriceNum(item,'sell','Price')">
                      <span class="red">{{tofix(item.price)}}</span>
                    </td>
                    <td class="font-right" style="cursor: pointer;" @click="clickPriceNum(item,'sell','Num')">
                      <span>{{tofix(item.num)}}</span>
                    </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!--交易面板-->
      <div style="min-height: calc(50% - 10px);height: calc(50% - 10px);background: #21201A;margin-top: 10px;">
        <div style="height: 38px;line-height: 38px;background: #1C1A13;">
          <span>限价交易</span>
          <span style="float: right;" class="cursorPointer" @click="noInputPwd">免密设置</span>
        </div>
        <div style="height: 43px;line-height: 43px;border-top: 2px solid #151511;border-bottom: 2px solid #151511;">
          <div style="width: 50%;display: inline-block;padding: 0 10px;box-sizing: border-box;">
            <div v-if="login">
              <span class="cursorPointer" @click="$router.push({name:'login'})">
                登录
              </span>／
              <span class="cursorPointer" @click="$router.push({name:'logregisterin'})">
                注册
              </span> 开始交易
              <span style="float: right;" class="cursorPointer" @click="$router.push({name:'countCenter'})">
                充值
              </span>
            </div>
            <div v-if="!login">
              <span style="cursor: pointer">
                可用 {{buyAble}} {{market}}
              </span>
              <span style="cursor: pointer;float: right;color: #C5B39B;" @click="$router.push({name:'countCenter'})">
                充值
              </span>
            </div>
          </div><!--
          --><div style="width: 50%;display: inline-block;padding: 0 10px;box-sizing: border-box;">
              <div v-if="login">
              <span class="cursorPointer" @click="$router.push({name:'login'})">
                登录
              </span>／
            <span class="cursorPointer" @click="$router.push({name:'logregisterin'})">
                注册
              </span> 开始交易
            <span style="float: right;" class="cursorPointer" @click="$router.push({name:'countCenter'})">
                充值
              </span>
          </div>
              <div v-if="!login">
                <span style="cursor: pointer">
                  可用 {{sellAble}} {{coin}}
                </span>
                <span style="cursor: pointer;float: right;color: #C5B39B;" @click="$router.push({name:'countCenter'})">
                  充值
                </span>
              </div>
          </div>
        </div>
        <div >
          <div style="width: 50%;display: inline-block;padding: 10px 15px;box-sizing: border-box;">
            <div>
              <div>
                买入价
              </div>
              <div style="position: relative;">
                <input v-model="buyPrice" placeholder="请输入内容" class="exchangePlate" @input="buyExchange('buy')" type="number" min="0">
                <span class="suffix">{{market}}</span>
              </div>
              <div style="height: 20px;background: #1C1A13;padding-left: 10px;">={{mul(buyPrice,newstData.trade.price_cny)}} CNY</div>
            </div>
            <div style="margin-top: 5%">
              <div>
                买入量
              </div>
              <div style="position: relative;">
                <input v-model="buyNum" placeholder="请输入内容" class="exchangePlate" @input="buyExchange('buy')" type="number" min="0" step="0.1">
                <span slot="suffix" style="display: inline-block;height: 28px;line-height: 28px;position: absolute;top: 0;right:10px;">{{coin}}</span>
              </div>
            </div>
            <div class="block">
              <el-slider
                v-model="sliderValueBuy"
                @change="formatTooltipBuy"
                :format-tooltip="formatTooltip"
                :step="20"
                show-stops>
              </el-slider>
            </div>
            <div>
              <div style="float: left">
                交易额 <br>
                {{buyTotal}}
              </div>
              <div style="float: right">
                费率 <br>
                {{buyFee*1}}%
              </div>
            </div>
            <el-button type="primary" size="mini" style="width: 100%;background: #00CC66;border-color: #00CC66;margin-top: 5%;" @click="createdOrder('buy')" :disabled="buydisabled">买入{{coin}}</el-button>
          </div><!--
          --><div style="width: 50%;display: inline-block;padding:10px 15px;box-sizing: border-box;vertical-align: top;">
          <div>
            <div>
              卖出价
            </div>
            <div style="position: relative;">
              <input v-model="sellPrice" placeholder="请输入内容" size="mini" class="exchangePlate" type="number" min="0" @input="buyExchange('sell')">
              <span class="suffix">{{market}}</span>
            </div>
            <div style="height: 20px;background: #1C1A13;padding-left: 10px;">={{mul(sellPrice,newstData.trade.price_cny)}} CNY</div>
          </div>
          <div style="margin-top: 5%">
            <div>
              卖出量
            </div>
            <div style="position: relative;">
              <input v-model="sellNum" placeholder="请输入内容" class="exchangePlate" type="number" min="0" @input="buyExchange('sell')">
              <span class="suffix">{{coin}}</span>
            </div>
            </div>
            <div class="block">
              <el-slider
                v-model="sliderValueSell"
                :format-tooltip="formatTooltip"
                :step="20"
                @change="formatTooltipSell"
                show-stops>
              </el-slider>
            </div>
            <div>
              <div style="float: left;">
                交易额 <br>
                {{sellTotal}}
              </div>
              <div style="float: right">
                费率 <br>
                {{sellFee*1}}%
              </div>
            </div>
            <el-button type="primary" @click="createdOrder('sell')" size="mini" style="width: 100%;background: #FF5C5C;border-color: #FF5C5C;margin-top: 5%;" :disabled="selldisabled">卖出{{coin}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="输入交易密码" :visible.sync="dialogFormVisible" width="500px" @close="close">
      <form style="width: 300px;margin: 0 auto;" class="dialogForm">
        <div>
          <div style="color:#FFFFFF;text-align: center;" v-if="login">
            您还没有登录，请先进行登录
          </div>
          <div>
            <input type="password" style="width: 100%;height: 28px;outline: none;border: none;border-radius: 3px;padding-left: 10px;box-sizing: border-box;" v-model="form.pwd" ref="exchangePwdInput">
            <span class="forPwd" @click="forgetPwd">忘记密码</span>
            <el-button @click="dialogSure" type="primary" :disabled="!form.pwd || exchangeDisable">确定</el-button>
          </div>
        </div>
      </form>
    </el-dialog>
    <el-dialog title="免输入交易密码设置" :visible.sync="dialogFormVisible1" width="500px" @close="formPwd.inputCode='';">
      <form style="width: 300px;margin: 0 auto;" class="dialogForm">
        <div style="width: 100%;border:1px solid #979797;" class="exInputDia">
          <el-radio-group v-model="radio2" @change="changePwdType">
            <div class="elRadio">
              <el-radio :label="2">不验证</el-radio>
              <span class="elRadioSpan">交易密码</span>
            </div>
            <div class="elRadio">
              <el-radio :label="1">每两个小时验证一次</el-radio>
              <span class="elRadioSpan">交易密码</span>
            </div>
            <div style="padding: 8px 10px;width:300px;box-sizing: border-box;">
              <el-radio :label="0">每次都验证</el-radio>
              <span class="elRadioSpan">交易密码</span>
            </div>
          </el-radio-group>
        </div>
        <div style="margin: 30px 0 20px 0;">
        <input type="number" placeholder="请输入验证码" class="codeStylePwd" v-model="formPwd.inputCode" @input="inputCode">
        <span class="reSendCodePwd">
           <el-button type="primary" :disabled="formPwd.codeDisable"  @click="sendCode" >
             {{sendSureCode}}
           </el-button>
        </span>
        </div>
        <div>
        <el-button @click="editPwdStatus" type="primary" :disabled="formPwd.disable">确定</el-button>
        </div>
      </form>
    </el-dialog>
  </div>
</template>
<script>
  import Kline from 'kline';
  import {CMX} from '../global/math.js';
  export default{
    data () {
      return {
        ableBuySell:'',
        sliderValueSell:0,
        sliderValueBuy:0,
        radio2: 0,
        setPwdType:{},
        changeSpecialArea:[],  //货币列表
        buyDateOri:[],
        newstexchange:[],
        newstData:{trade:{}},
        sellDateOri:[],
        myOrderAndTradeDate:[],
        showMyOrAndTraDate:[],
        buySellType:'buy',
        exchangeDisable:false,
        dialogFormVisible:false,//输入交易密码
        dialogFormVisible1:false,//修改免密设置
        form: {
          pwd: ''
        },
        formPwd: {
          pwd: '',
          inputCode:"",
          pwdType:'noNeed',
          disable:true,
          codeDisable:false,
        },
        timer:'',
        webDate:{body:{}},
        kline:{},
        buy_fee:'',
        sendSureCode:'发送邮箱验证码',
        combineData:[{len:4},{len:3},{len:2},{len:1}],
        value6:4,
        inputValuePoint:4,
        market:'',
        coin:'',
        symbol:'',
        symbolReverse:'',
        selecetdMarket:0,//-1表示切换到星星
        selecetdMarketData:'',
        showSelecetdMarketData:'',
        search:'',
        deputeType:'current',
        currentDepute:[],
        historyDepute:[],
        valueTime1:'',
        valueTime2:'',
        buyDate:[],
        sellDate:[],
        login:false,//表示登陆了    true表示未登录
        exchangeTypeTab:'all',
        buyAble:'0.0000',//买入可用余额
        sellAble:'0.0000',//买入可用余额
        buyFee:'0',
        sellFee:'0',
        buyPrice:'',//用户点击输入密码的的时候的价格
        buyNum:'',
        buyTotal:'0.0000',
        sellPrice:'',
        sellNum:'',
        sellTotal:'0.0000',
        page:{
          current:1,
          total:0
        },
        tableLoad:false,
        pickerOptions1:{
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        timeType:'',
        sortStatus:{new_price:{sort:false,dir:''},change_24H:{sort:false,dir:''},status:{sort:false,dir:''}},
        sortType:'',
        buydisabled:false,
        selldisabled:false,
        stime:'',
        etime:''
      }
    },
    created(){
      this.market = this.$route.params.currency_mark;
      this.coin = this.$route.params.area_currency_id;
      this.symbolReverse = this.coin + '/' + this.market;
      this.symbol = this.market + '/' + this.coin;
      this.area_currency_member(this.market,this.coin);
//      this.myExchangePend();
      this.initWebSocket();
    },
    mounted(){
      var that = this;
      var clientWidth = that.$refs.kline_container.offsetWidth;
      var clientHeight = that.$refs.kline_container.offsetHeight;
      that.kline = '';
      that.kline = new Kline({
        element: "#kline_container",
        width: clientWidth,
        height: clientHeight,
        theme: 'dark',
        language: 'zh-cn', // zh-cn/en-us/zh-tw
        ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
        symbol: that.symbol ,
        symbolName:'比特币',
        type: "poll",
        url: (window.location.host.indexOf('192.168') == -1 && window.location.host.indexOf('127.0') == -1)?window.location.protocol+"//"+window.location.host+"/Api/Area/getOrdersKline1":'http://update.co-in.org/Api/Area/getOrdersKline1',
        limit: 300,
        disableFirebase: true,
        intervalTime: 5000,
        debug: false,
        showTrade: false,
      });
      that.kline.draw();

      that.kline.setSymbol(that.symbol,that.symbol);
      that.kline.resend();
      window.onresize = ()=> {
        if(that.$route.name !== 'Exchange'){
          return;
        }
        var clientWidth = that.$refs.kline_container.offsetWidth;
        var clientHeight = that.$refs.kline_container.offsetHeight;
        that.kline.resize(clientWidth,clientHeight);
      };
      that.timerInterval = setInterval(()=>{
        that.myExchangePend()
      },3000)
//      this.DeputeTableWrapTop();
    },
    methods:{
      sele(item,index){
        item.self = !item.self;
        var seleTradePair = item.symbol;
        var tradePair = JSON.parse(localStorage.getItem('tradePair') || '[]');
        if(item.self){
          tradePair.push(seleTradePair);
        }else{
          tradePair.splice(tradePair.indexOf(seleTradePair),1);
          if(this.selecetdMarket == -1){
            this.showSelecetdMarketData.splice(index,1)
          }
        }
        localStorage.setItem('tradePair',JSON.stringify(tradePair));
      },
      DeputeTableWrapTop(){
//        var that = this;
//        var hisDeputeTableWrap = document.getElementById('hisDeputeTableWrap');
//        var realTransScroll = document.getElementById('realTransScroll');
//        hisDeputeTableWrap.addEventListener('scroll', function() {
//          if(this.scrollTop + that.$refs.hisDeputeTableWrap.offsetHeight > that.$refs.hisTable.offsetHeight - 10){
//            if(that.page.current > that.page.total || that.page.total<=1){
//              return;
//            }else{
//              var stime = '';var etime = '';
//              if(this.timeType){
//                etime = timestamp / 1000;
//                stime= (timestamp - type * 24 * 3600 * 1000) / 1000;
//              }else if(this.valueTime1){
//                stime = this.valueTime1.getTime() / 1000;
//              }else if(this.valueTime2){
//                etime = this.valueTime2.getTime() / 1000;
//              }
//              this.myExchangePend(stime,etime);
//            }
//          }
//        });
//        realTransScroll.addEventListener('scroll', function() {
//          if(this.scrollTop + that.$refs.realTransScroll.offsetHeight > that.$refs.realTransScrollWrap.offsetHeight - 10){
//            if(that.page.current > that.page.total || that.page.total<=1){
//              return;
//            }else{
//              this.myExchangePend();
//            }
//          }
//        });
      },
      initWebSocket(){
        var webSocketUrl = this.resUrl();
        webSocketUrl.then((res)=>{
          var webSocketUrl = res.ws;
          this.websock = new WebSocket(webSocketUrl);
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onclose = this.websocketclose;
        })
      },
      websocketonmessage(e){
        var response = JSON.parse(e.data);
        if(response.type && response.type == "ping"){
          this.websock.send(JSON.stringify({type:'pong'}));
          return;
        }
        if(response.login == 'success'){
          this.websock.send(JSON.stringify({type:'login',name:'currency',room_id:this.symbol}));
          return;
        }
        if(response.login == 'out_success'){
          this.scrollTop = '';
          this.websock.send(JSON.stringify({type:'login',name:'currency',room_id:this.symbol}));
          return;
        }
        if(!response.login || response.login != 'success'){
          this.webDate = response;
          this.handWebRes(response)
        }
      },
      websocketclose(e){
        this.websock.close();
      },
      changePoint(data){
        this.buyDate = this.combine(this.buyDateOri,data);
        this.sellDate = this.combine(this.sellDateOri,data);
      },
      combine(item,type){
        var item = JSON.parse(JSON.stringify(item));
        var arr = [];
        var obj = [];
        for(var i = 0;i<item.length;i++){
          var arrPrice = item[i].price.split('.');
          if(arrPrice.length>1){
            var itemValue = arrPrice[0] + '.' + arrPrice[1].slice(0,type);
          }else{
            var itemValue = item[i].price;
          }
          var index = arr.indexOf(itemValue);
          if(index == -1){
            arr.push(itemValue);
            item[i].price = itemValue;
            obj.push(item[i]);
          }else{
            obj[index].num = obj[index].num + item[i].num;
          }
        }
        return obj;
      },
      handWebRes(response){
        var that = this;
        this.webDate = response;
        this.buyDateOri = response.body.list.buy;
        this.sellDateOri = response.body.list.sell
        var asks = this.sellDateOri.map(function(item){
          return [item.price,item.num];
        })
        var bids = this.buyDateOri.map(function(item){
          return [item.price,item.num];
        })
        sessionStorage.setItem('depths',JSON.stringify({asks:asks,bids:bids}));
        this.sellDateOri.reverse();
        this.newstexchange = response.body.list.orders.body;
        this.changeSpecialArea = response.body.home.filter(function(data,index){
          if(data.currency_mark == that.market){
            return data;
          }
        })[0].list;
        this.changeSpecialArea.filter(function(data,index){
          if(data.currency_mark == that.coin){
            that.newstData = data;
          }
        });
        this.buyPrice = this.buyPrice?this.buyPrice:this.newstData.trade.new_price;
        this.sellPrice = this.sellPrice?this.sellPrice:this.newstData.trade.new_price;
        this.handWebResDate(response);
      },
      handWebResDate(data){
        this.selecetdMarketData = [];
        var tradePair = localStorage.getItem('tradePair') || '[]';
        var arr = [];
        var dataMarket = data.body.home;
        for(var i = 0;i<dataMarket.length;i++){
          for(var j=0;j<dataMarket[i].list.length;j++){
            dataMarket[i].list[j].symbol =dataMarket[i].list[j].currency_mark +'/'+dataMarket[i].currency_mark;//coin/market
            dataMarket[i].list[j].symbolReverse = dataMarket[i].currency_mark + '/' + dataMarket[i].list[j].currency_mark;
            if(tradePair.indexOf(dataMarket[i].list[j].symbol)>-1){
              this.$set(dataMarket[i].list[j],'self',true)
            }else{
              this.$set(dataMarket[i].list[j],'self',false)
            }
            if(i != this.selecetdMarket){
              var existTardePair = tradePair.indexOf(dataMarket[i].list[j].symbol) > -1;
              if(existTardePair){
                arr.push(dataMarket[i].list[j]);
              }
            }else{
              if(i == this.selecetdMarket){
                arr = dataMarket[i].list;
              }
            }
          }
        }
        this.selecetdMarketData = arr;
        this.searchCoin();
        if(this.sortType){
          this.sort(this.sortType,'web');
        }
      },
      changeMarket(selecetdMarket,type){
        if(selecetdMarket === this.selecetdMarket && !type){
          return;
        }else{
          this.selecetdMarket = selecetdMarket;
          this.sortStatus={new_price:{sort:false,dir:''},change_24H:{sort:false,dir:''},status:{sort:false,dir:''}}
          this.sortType = 'status';
          this.handWebResDate(this.webDate);
        }
      },
      sort(type,websocket){
        var that = this;
        this.sortType = type;
        if(this.sortStatus[type].sort){
          if(websocket){
            this.sortStatus[type].dir = this.sortStatus[type].dir === 'up'?'up':'down';
          }else{
            this.sortStatus[type].dir = this.sortStatus[type].dir === 'up'?'down':'up';
          }
        }else{
          this.sortStatus[type].sort = true;
          this.sortStatus[type].dir = 'up';
        }
        for(var x in this.sortStatus){
          if(type !== x){
            this.sortStatus[x].sort = false;
            this.sortStatus[x].dir = '';
          }
        }
        this.showSelecetdMarketData.sort(function(a,b){
          if(that.sortStatus[type].dir === 'up'){
            return b['trade'][type] - a['trade'][type];
          }else{
            return a['trade'][type] - b['trade'][type];
          }
        })
      },
      searchCoin(){
        this.showSelecetdMarketData = this.selecetdMarketData.filter((item,index)=>{
          var symbol = item.currency_mark.toLowerCase();
          return symbol.indexOf(this.search.toLowerCase()) > -1;
        })
      },
      changeDeputeType(type,reqType){
        if(this.deputeType === type){return;}
        this.deputeType = type;
//        this.page.current = 1;
//        this.currentDepute = [];
//        this.historyDepute = [];
        this.timeType = '';
//        this.myExchangePend();
      },
      area_currency_member(market,coin){
        var that = this;
        this.interFace('area_currency_member',{
          currency_name:coin,
          area_currency_name:market
        }).then(function (res) {
          if(res.body && res.body == "未登录"){
            that.login = true;
            return;
          }
          that.radio2 = Number(res.member.pwdtrade_type);
          that.setPwdType = res.member;
          that.myOrderAndTradeDate = res;
          that.buyAble = res.area_currency.num;
          that.sellAble = res.currency.num;
          that.buyFee = res.buy_fee;
          that.sellFee = res.sell_fee;
        })
      },
      changeDeputeTabType(type){
        if(type === this.exchangeTypeTab){
          return;
        }
        this.exchangeTypeTab = type;
      },
      buyExchange(type){
        var that = this;
        if(!this[type + 'Price'] || !this[type + 'Num']){
          this[type + 'Total'] = '0.0000';
          return;
        }else{
          if(type == 'sell'){
            if(Number(this[type + 'Num']) > this[type + 'Able']){
              this.$message({
                message: '余额不足，请先充值',
                type: 'error'
              });
              return
            };
          }else{
            if(this[type + 'Price'] * this[type + 'Num'] > this[type + 'Able']){
              this.$message({
                message: '余额不足，请先充值',
                type: 'error'
              });
              return
            }
          }
          this[type+'Price'] = this.tofix(this[type + 'Price']);
          this[type + 'Num'] = this.tofix(this[type + 'Num']);
          this[type + 'Total'] = this.mul(that[type + 'Price'],that[type + 'Num']);
        }
      },
      mul(value1,value2){
        if(!value1 || !value2){return '0'}
        return CMX.mul(value1,value2)
      },
      tofix(value,bit){
        bit = bit?bit:4;
        var val = String(value).split('.');
        if(val[1] && val[1].length>bit){
          return val[0]+'.'+val[1].slice(0,bit);
        }else{
          return value;
        }
      },
      exchangeTrade(){
        var that = this;
        that.exchangeDisable = true;
        var params = {
          area_name:that.market,
          currency_name:that.coin,
          tradeprice:that[that.buySellType + 'Price'],
          tradenum:that[that.buySellType + 'Num'],
          tradepwd:that.form.pwd,
          trade:that.buySellType
        };
        that[that.buySellType + 'disabled'] = true;
        this.interFace('currency_trade',params).then(function(res){
          that.exchangeDisable = false;
          that[that.buySellType + 'disabled'] = false;
          if(!res.body){
            that.$notify({
              title: '挂单成功',
              type: 'success'
            });
            that.dialogFormVisible = false;
            that.form.pwd = '';
            that[that.buySellType+ 'Price'] = '';
            that[that.buySellType+ 'Num'] = '';
            that[that.buySellType+ 'Total'] = '0.0000';
            that.area_currency_member(that.market,that.coin);
//            that.page.current = 1;
//            that.currentDepute = [];
//            that.historyDepute = [];
//            that.myExchangePend();
          }else{
            that.$notify.error({
              title: res.body,
            });
          }
        })
      },
      dialogSure(type){   //输入密码之后确认买入  或卖出
        this.dialogFormVisible = true;
        this.exchangeTrade()
      },
      createdOrder(type){
        var that =this;
        if(this.login || this.exchangeDisable){
          that.$message({
            message: '请先进行登录',
            type: 'warning'
          });
          return
        }
        if(this[type + 'Price'] && this[type + 'Num'] && (CMX.mul(that[type + 'Price'],that[type + 'Num']) >= 0.0001)){
          this.buySellType = type;
          if(that.setPwdType.pwdtrade_type == '2'){//不验证
            this.exchangeTrade();
          }else if(that.setPwdType.pwdtrade_type == '0'){  //每次都验证
            this.dialogFormVisible = true;
            this.$nextTick(function(){
              that.$refs.exchangePwdInput.focus();
            })
          }else if(that.setPwdType.pwdtrade_type == '1'){  //两小时之内验证
            var timestamp = Date.parse(new Date());
            if(timestamp>that.setPwdType.pwdtrade_time*1000){
              this.dialogFormVisible = true;
              this.$nextTick(function(){
                that.$refs.exchangePwdInput.focus();
              })
            }else{
              this.exchangeTrade();
            }
          }
        }else{
          var tip = '';
          if(!this[type + 'Price']){
            tip = '请先输入交易价格,才能交易'
          }else if(!this[type + 'Num']){
            tip = '请先输入交易数量,才能交易'
          }else if(CMX.mul(that[type + 'Price'],that[type + 'Num']) < 0.0001){
            tip = '交易总额必须不小于0.0001,才能交易'
          }
          that.$message({
            message: tip,
            type: 'warning'
          });
        }
      },
      detalOrder(item){
        var that = this;
        if(!item.disable){
          this.$set(item,'disable',true);
          this.interFace('cancel',{
            order_id:item.orders_id
          }).then(function(){
            that.currentDepute = [];
            that.historyDepute = [];
            that.page.current = 1;
//            that.myExchangePend();
          })
        }
      },
      goTo(item){
        var coin = item.symbol.split('/')[0];
        var market = item.symbol.split('/')[1];
        this.$router.push({name:'Exchange',params:{area_currency_id:coin,currency_mark:market}})
      },
      noInputPwd(){   //点击文字  弹出框
        if(!this.login){
          this.radio2 = Number(this.setPwdType.pwdtrade_type);
          this.dialogFormVisible1 = true;
          clearTimeout(this.timer);
          this.sendSureCode = '发送邮箱验证码';
          this.formPwd.codeDisable = false;

        }else{
          this.$notify({
            title: '请先进行登录',
            type: 'warning'
          });
        }
      },
      editPwdStatus(){   //发送请求 修改状态
        this.formPwd.disable = true;
        var that = this;
        this.interFace('pwdtrade_type',{
          type:this.radio2,
          code:this.formPwd.inputCode,
        }).then(function(res){
          that.formPwd.disable = false;
          if(!res.body){
            that.$notify({
              title: '设置成功',
              type: 'success'
            });
            that.dialogFormVisible1 = false;
            that.formPwd.inputCode='';
            that.area_currency_member(that.market,that.coin);
          }
        })
      },
      changePwdType(data){
        this.radio2 = data;
      },
      inputCode(){
        var reg = this.regex().code;
        if(reg.test(this.formPwd.inputCode)){
          this.formPwd.disable = false;
        }else{
          this.formPwd.disable = true;
        }
      },
      sendCode(){   //获取验证码
        var that = this;
        this.formPwd.codeDisable = true;
        this.interFace('pwdtrade_email',{}).then(function(res){
          if(!res.body){
            that.sendSureCode = 60;
            that.timer = setInterval(function(){
              that.sendSureCode--;
              if(that.sendSureCode == -1){
                clearTimeout(that.timer);
                that.sendSureCode = '发送验证码';
                that.formPwd.codeDisable = false;
              }
            },1000);
            that.$notify({
              title: '邮箱验证码发送成功',
              type: 'success'
            });
          }else{
            that.formPwd.codeDisable = false;
          }
        })
      },
      forgetPwd(){
        this.$router.push({name:'forgetChangePwd'})
      },
      close(){
        this.form.pwd = '';
      },
      formatTooltipSell(val){//slider滑块
        var that = this;
        if(this.sellPrice){
          var num='';
          num = CMX.mul(CMX.div(that.sellAble,that.sellPrice),that.sliderValueSell)/100;
          var sellNum = String(num).split('.');
          if(sellNum[1] && sellNum[1].length>4){
            this.sellNum = sellNum[0] + '.' + sellNum[1].slice(0,4);
          }else{
            this.sellNum = sellNum;
          }
          this.sellTotal = CMX.mul(num,this.sellPrice).toFixed(8);
        }
        return val + '%';
      },
      formatTooltip(val){
        return val + '%';
      },
      formatTooltipBuy(val){
        if(this.buyPrice){
          var that = this;
          var num='';
          num = CMX.mul(CMX.div(that.buyAble,that.buyPrice),that.sliderValueBuy)/100;
          var buyNum = String(num).split('.');
          if(buyNum[1] && buyNum[1].length>4){
            this.buyNum = buyNum[0] + '.' + buyNum[1].slice(0,4);
          }else{
            this.buyNum = buyNum;
          }
          this.buyTotal = CMX.mul(num,this.buyPrice).toFixed(8);
        }
        return val + '%';
      },
      clickPriceNum(item,type){
        if(!this.login){//true  未登录
          if(this[type + 'Price'] * this[type + 'Num'] > this[type + 'Able']){
            this.$message({
              message: '余额不足，请先充值',
              type: 'error'
            });
          }
        }
        this[type+ 'Price'] = this.tofix(item['price']);
        this[type+ 'Num'] = this.tofix(item['num']);
        this[type+ 'Total'] = this.mul(this[type + 'Price'],this[type + 'Num'])
      },
      myExchangePend(stime,etime){
        if(this.login){
          return
        }
        var that = this;
        var type = this.deputeType === 'current'?'orders':'status';
//        var value1 = stime?stime:'';
//        var value2 = etime?etime:'';
        that.interFace('getOrdersMember',{
          type:type,
          stime:this.stime,
          etime:this.etime,
          all:0,
          list:0,
          value:20,
          currency_name:that.coin,
          area_currency_name:that.market
        }).then(function(res){
         that.tableLoad = false;
          if(res.type === 530){
            that.login = true;
            return
          }
          that.page.total = res.list;
//          that.page.current++;
//          that.tableLoad = false;
          that.currentDepute = [];
          that.historyDepute = [];
          if(type === 'orders'){
            that.currentDepute = that.currentDepute.concat(res.body);
          }else{
            that.historyDepute = that.historyDepute.concat(res.body);
          }
        })
      },
      searchOrder(type){
        this.currentDepute = [];
        this.historyDepute = [];
        this.page.current = 1;
        this.timeType = type;
        var stime,etime;
        var timestamp =Date.parse(new Date());
        if(type){
          etime= timestamp / 1000;
          stime = (timestamp - type * 24 * 3600 * 1000) / 1000;
        }
        this.stime = stime;
        this.etime = etime;
        this.tableLoad = true;
//        this.myExchangePend(stime,etime);
      },
      resetPicker(){
//        this.valueTime2 = '';
//        this.valueTime1 = '';

        this.stime = '';
        this.etime = '';
        this.timeType = '';
//        this.currentDepute = [];
//        this.historyDepute = [];
        this.page.current = 1;
//        this.myExchangePend();
      },
      pickerChange(type){
        var stime = '',etime = '';
        this.timeType = '';
        if(this.valueTime1){
          this.stime = this.valueTime1.getTime() / 1000;
        }
        if(this.valueTime2){
          this.etime = this.valueTime2.getTime() / 1000;
        }
//        this.currentDepute = [];
//        this.historyDepute = [];
//        this.page.current = 1;
//        this.myExchangePend(stime,etime);
      },
      buySellInput(type,value){
        switch(type)
        {
          case 'price':
            this.inputmodel.buy = value;
            var pointBit = value.split('.')[1];
            if(pointBit && pointBit.length>this.inputValuePoint){
              this.inputmodel.buy = value.split('.')[0]+'.'+pointBit.slice(0,this.inputValuePoint)
            }
            if(this.inputmodel.num*1){
              this.inputmodel.totalPrice = this.inputmodel.num * value == 0?'':this.inputmodel.num * value;
              if(this.inputmodel.totalPrice*1){
                this.inputmodel.totalPrice = this.inputmodel.totalPrice.toFixed(this.inputValuePoint)
              }
            }else{
              this.inputmodel.totalPrice = '';
            }
            break;
          case 'num':
            this.inputmodel.num = value;
            var pointBitNum = value.split('.')[1];
            if(pointBitNum && pointBitNum.length>this.inputValuePoint){
              this.inputmodel.num = value.split('.')[0]+'.'+pointBitNum.slice(0,this.inputValuePoint)
            }
            if(this.inputmodel.buy){
              if(this.inputmodel.buy * this.inputmodel.num){
                this.inputmodel.totalPrice = this.inputmodel.buy * this.inputmodel.num
              }else{
                this.inputmodel.totalPrice = '';
                return;
              }
              this.inputmodel.totalPrice = this.inputmodel.totalPrice.toFixed(this.inputValuePoint)
            }else{
              this.inputmodel.totalPrice = '';
            }
            break;
        };
        this.handFeeFn();
      },
      handFeeFn(){
        if(this.inputmodel.totalPrice *1){
          if(this.buySellType == 'buy'){
            this.inputmodel.handFee = this.inputmodel.num * this.buy_fee / 100;
          }else{
            this.inputmodel.handFee = this.inputmodel.totalPrice * this.buy_fee / 100;
          }
        }else{
          this.inputmodel.handFee = 0;
        }
      },
    },
    beforeRouteLeave(to,form,next){
      this.kline.pause();
      this.websocketclose();
      next();
    },
    watch: {
      '$route' (to, from) {
        this.$router.go(0);
      }
    },
    computed:{
      currentDeputeDate(){
        var that = this;
        if(this.exchangeTypeTab === 'all'){
          return this.currentDepute;
        }else{
          return this.currentDepute.filter((item)=>{
            return item.type === this.exchangeTypeTab;
          });
        }

      },
      historyDeputeDate(){
        if(this.exchangeTypeTab === 'all'){
          return this.historyDepute;
        }else{
          return this.historyDepute.filter((item)=>{
            return item.type === this.exchangeTypeTab;
          });
        }
      }
    }
  }
</script>
<style>
  .symbol{
    background: #21201A;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:5px 0;
  }
  .symbol>div:nth-of-type(1){
    float: left;
    margin-left:8px;
  }
  .symbol>div:nth-of-type(2){
    width: 41%;
    float: left;
    white-space:nowrap;
  }
  .symbol>div:nth-of-type(3){
    width: 38%;
    float: right;
  }
  .dot{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #FFFFFF;
  }
  .symbolTab{
    padding:10px 0 5px 0;
    position: relative;
    height: 23px;
  }
  .symbolTab li{
    display: inline-block;
    padding:0 10px 0;

  }
  .symbolTab li:last-child{
    position: absolute;
    right: 5px;
    top:13px;
  }
  .symbolTab li:first-child{
    padding-left: 0;
  }
  .symbolTable{
    height: calc(100% - 142px);
  }
  .currentDeputeTable{
    height: calc(100% - 38px);
  }
  .currentDeputeTableHis{
    height: calc(100% - 76px);
  }
  .hisDeputeTableWrap table,#realTransScroll table{
    border-collapse:collapse;
  }
  .hisDeputeTableWrap table tr,#realTransScroll table tr{
    border-bottom: 1px solid #1C1A13;
    height: 30px;
  }
  .hisDeputeTableWrap table tr:hover,#realTransScroll table tr:hover{
    background: #2E2E2E;
    cursor: pointer;
  }
  .currentDeputeTableHis>div:nth-of-type(1){
    padding:7px 10px;
  }
  .currentDeputeTableHis>div>span{
    border:1px solid #FFFFFF;
    padding:1px 7px;
    border-radius: 3px;
    cursor: pointer;
  }
  .currentDeputeTableHis>div>span:nth-last-of-type(1){
    margin-right: 70px;
  }
  .symbolTable table,.currentDeputeTable table,.currentDeputeTableHis table{
    width: 100%!important;
  }
  .newmarket::-webkit-scrollbar,.realTransScroll::-webkit-scrollbar,.newstScroll::-webkit-scrollbar,.hisDeputeTableWrap::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
  }
  .newmarket::-webkit-scrollbar-thumb,.realTransScroll::-webkit-scrollbar-thumb,.newstScroll::-webkit-scrollbar-thumb,.hisDeputeTableWrap::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #C5B39B;
  }
  .newmarket::-webkit-scrollbar-track,.realTransScroll::-webkit-scrollbar-track,.newstScroll::-webkit-scrollbar-track,.hisDeputeTableWrap::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #000000;
  }
  .realTransScroll{
    height: calc(100% - 32px);
    overflow: auto;
  }
  .hisDeputeTableWrap{
    height: calc(100% - 68px);
    overflow: auto;
  }
  .newstScroll{
    height: calc(100% - 34px);
    overflow: auto;
  }
  .exchangePlate{
    height: 28px;
    width:100%;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 12px;
    padding:0 50px 0 15px;
    background: #2E2E2E;
    color: #FFFFFF;
    line-height: 28px;
    transition: all .5s ease;
    border:1px solid white;
  }
  .exchangePlate::-webkit-input-placeholder {
    color:#ffffff;
  }
  .exchangePlate:hover{
    border:1px solid #C5B39B;
    box-shadow: 0px 0px 2px #C5B39B inset,0px 0px 2px #C5B39B;
  }
  .exchangePlate input{
    background: #2E2E2E;
  }
  .deputeTabLeft{
    float: left;
    cursor: pointer;
  }
  .deputeTabLeft>li{
    display: inline-block;
    padding:0 10px;
  }
  .deputeTabLeftTab{
    border-bottom: 2px solid #C5B39B;
    color: #C5B39B;
  }
  .deputeTabRight{
    float: right;
  }
  .deputeTabRight li{
    display: inline-block;
    padding-right:10px;
    cursor: pointer;
  }
  .el-slider__button{
    width: 12px;
    height: 12px;
  }
  .search{
    background: #1C1A13;padding-top: 10px;
  }
  .search > div{
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .search .el-input__inner{
    background: #1C1A13;
    font-size: 16px;
  }
  .search .el-input--mini .el-input__inner{
    height: 26px;
  }
  #kline_container{
    height: calc(100% - 60px)!important;
    width:100%!important;
  }
  #kline_container .trade_container.dark.hide{
    display: none;
  }
 .marketUnderLine{
   border-bottom:2px solid #C5B39B;
   color: #C5B39B;
 }
  .marketTab{
    cursor: pointer;
  }
  .red{
    color: #F03333;
  }
  .green{
    color: #00CC66;
  }
  .deputeTabRightTab{
    color: #C5B39B;
    border-bottom: 2px solid #C5B39B;
  }
  .exchangePicker{
    display: inline;
  }
  .exchangePicker .el-date-editor.el-input,.exchangePicker .el-date-editor.el-input__inner{
    width:130px;
  }
  .exchangePicker .el-input__inner{
    background: #2E2E2E;
    color: #FFFFFF;
  }
  .exchangeContent{
    height: calc(100vh - 70px);
    background: #151511;
    padding-top: 0.5%;
    box-sizing: border-box;
    font-size: 0;
  }
  .exchangeContent .el-input__inner{
    color: #ffffff;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .cursorPointer{
    cursor: pointer;
    color: #C5B39B;
  }
  input{
    outline:none;
  }
  .suffix{
    display: inline-block;
    height: 28px;
    line-height: 28px;
    position: absolute;
    top: 0;
    right:10px;
  }
  .dialogForm .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
    color:#999999;
    background: #4E4C4A;
    border-color:#4E4C4A;
  }
  .dialogForm button{
    width: 300px;
    height: 30px;
    line-height: 30px;
    padding:0;
  }
  #container{
    min-width: 1100px;
    overflow: auto;
  }
  #container .el-dialog{
    background:#21201a;
  }
  #container .el-dialog__header{
    text-align:center;
  }
  .forPwd{
    display: inline-block;
    float: right;
    text-align: right;
    color: #FFFFFF;
    cursor: pointer;
  }
  #container .el-dialog__header{
    text-align: center;
  }
  #container .el-dialog__title{
    color: #FFFFFF;
  }
  .elRadio{
    padding: 8px 10px;
    border-bottom: 1px solid #979797;
    width:300px;
    box-sizing: border-box;
  }
  .elRadioSpan{
    color:#FFFFFF;
    padding-left: 10px;
  }
  .codeStylePwd{
    width: 160px;
    border: none;
    outline: none;
    height: 28px;
    border-radius: 3px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .reSendCodePwd button{
    height: 30px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    float: right;
    position: absolute;
    margin-left: 10px;
    width:130px;
  }
  .timeType{
    color: #C5B39B;
    border-color: #C5B39B!important;
  }
  .seleColor{
    color: #E1CCAA;
  }
  .sortColor{
    color: #AA9882;
  }
</style>

